<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
  	<title>我的订单--东西互联网</title>
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="css/muiicon.css" />
    <link rel="stylesheet" href="css/jquery.mmenu.all.css" />
    <link rel="stylesheet" href="css/default.css" />
</head>
	<body>
			<div class="page">
				<header class="mui-bar mui-bar-nav" >
					 <a href="javascript:history.back();"  class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span> <span class="title">我的订单</span></span>
					</a>
					<h1 class="mui-title" id="title"></h1>
				</header>
				<div class="mui-content">
					<!-- 订单列表  -->
					<div class="data-list">
						<div class="order-item">
							<p  class="order-time">12-01 21:08</p>
							<div class="mui-card box" >
								<div class="box-header"><a href="#" class="order-no">20151202001   &gt;<span class="mui-pull-right order-state">已完成</span></a></div>
								<ul class="box-body">
									<li class="mui-row">
										<div class="mui-col-xs-3">
											<a href="product_view.html"><img class="order-goods-image " src="img/category_caibao.jpg"></a>
										</div>
										<div class="order-goods-remark mui-col-xs-9">
												<a href="product_view.html">
													彩宝戒指
													<p class="mui-ellipsis-2">型号：cjkdd10032 主石：10.4x15.7mm 副石：1.44ctx18粒 金重：8.1g</p>
												</a>
										</div>
									</li>
									<li><label>总计</label><span class="mui-pull-right  order-freight">900</span> </li>
								</ul>
								<div class="box-footer"> <button action="delete" class="mui-btn mui-pull-right">删除</button></div>
							</div>
						</div>
						
						<div class="order-item">
							<p  class="order-time">11-30 20:28</p>
							<div class="mui-card box" >
								<div class="box-header"><a href="#" class="order-no">20151202001   &gt;<span class="mui-pull-right order-state">已完成</span></a></div>
								<ul class="box-body">
									<li class="mui-row">
										<div class="mui-col-xs-3">
											<a href="product_view.html"><img class="order-goods-image " src="img/category_caibao.jpg"></a>
										</div>
										<div class="order-goods-remark mui-col-xs-9">
												<a href="product_view.html">
													彩宝戒指
													<p class="mui-ellipsis-2">型号：cjkdd10032 主石：10.4x15.7mm 副石：1.44ctx18粒 金重：8.1g</p>
												</a>
										</div>
									</li>
									<li><label>总计</label><span class="mui-pull-right  order-freight">900</span> </li>
								</ul>
								<div class="box-footer"> <button action="delete" class="mui-btn mui-pull-right">删除</button></div>
							</div>
						</div>
						
						<div class="order-item">
							<p  class="order-time">20:08</p>
							<div class="mui-card box" >
								<div class="box-header"><a href="#" class="order-no">20151202001   &gt;<span class="mui-pull-right order-state">已完成</span></a></div>
								<ul class="box-body">
									<li class="mui-row">
										<div class="mui-col-xs-3">
											<a href="product_view.html"><img class="order-goods-image " src="img/category_caibao.jpg"></a>
										</div>
										<div class="order-goods-remark mui-col-xs-9">
												<a href="product_view.html">
													彩宝戒指
													<p class="mui-ellipsis-2">型号：cjkdd10032 主石：10.4x15.7mm 副石：1.44ctx18粒 金重：8.1g</p>
												</a>
										</div>
									</li>
									<li><label>总计</label><span class="mui-pull-right  order-freight">900</span> </li>
								</ul>
								<div class="box-footer"> <button action="delete" class="mui-btn mui-pull-right">删除</button></div>
							</div>
						</div>
					</div>
					<!-- end 订单列表  -->
				</div>
			</div>
		
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/jquery.mmenu.min.all.js" ></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script>
			 $(function(){
			 		//编辑
			 		$("#btnEdit").on('click',function(){
					 		$("#btnEdit").addClass("mui-hidden");
			 				$("#btnComplete").removeClass("mui-hidden");
			 				$(".carts-edit-box").fadeIn();
			 		});
			 		//完成
			 		$("#btnComplete").on('click',function(){
					 		$("#btnComplete").addClass("mui-hidden");
			 				$("#btnEdit").removeClass("mui-hidden");
			 				$(".carts-edit-box").fadeOut();
			 				
			 				//获取所有数量的取值
			 				var total = 0;
			 				$(".carts-edit-box").find(".mui-numbox-input").each(function(){
			 					var pBox = $(this).parent().parent().parent();
			 					//单价
			 					var price = pBox.find(".carts-price").text()*1;
			 					//数量
			 					var num = $(this).val()*1;
			 					pBox.find(".carts-number").text(num);
			 					//小计
			 					var sTotal = (price*num).toFixed(2);
			 					pBox.find(".carts-single-total").text(sTotal);
			 					
			 					total += sTotal*1;
			 					
			 					$(".carts-total").text(total.toFixed(2));
			 				});
			 				
			 		});
			 		
			 		/**
			 		 * 获取数量数组，更新记录的数量时用到
			 		 */
			 		function getCartsNumArray(){
			 			var arr = [];
			 			$(".carts-edit-box").find(".mui-numbox-input").each(function(){
			 				arr.push($(this).val());
			 			});
			 			return arr;
			 		}
			 		
			 		//分页加载时会有 新的numbox   待界面渲染完后用  $('.mui-numbox').numbox() 激活一下 
			 })
		</script>
	</body>
</html>
